<script setup lang="ts">
import { nextTick } from "vue";
//闭包

function MyObject() { }

function closure(){
  let arr = new Array(200000).fill(null).map(e => new (MyObject as any)())
  return function inner(){//一个函数 内部访问外部变量 形成闭包
     return arr;
  }
}

//函数由于被外部持有，自身不会释放，同时闭包也不会释放：访问外部变量
// let fn = closure();

//使用完毕fn之后
// fn = null;

//立即执行函数
// 立即执行函数只有一个作用：创建一个独立的作用域。这个作用域里面的变量，外面访问不到（即避免了「变量污染」）。

// 立即执行函数和闭包的区别：

// 立即执行函数和闭包没有什么关系，只是两者会经常结合在一起使用而已，但两者有本质的不同。

// 立即执行函数和闭包只是有一个共同优点就是能减少全局变量的使用。

// 立即执行函数只是函数的一种调用方式，只是声明完之后立即执行，这类函数一般都只是调用一次，调用完之后会立即销毁，不会占用内存。

// 闭包则主要是让外部函数可以访问内部函数的作用域，也减少了全局变量的使用，保证了内部变量的安全，但因被引用的内部变量不能被销毁，
// 增大了内存消耗，使用不当易造成内存泄露。
// https://www.cnblogs.com/wenxuehai/p/10357274.html



nextTick(() => {
  var liList = document.getElementsByTagName('li');
console.log(liList[0],35)
liList[0].onclick = function(){
    alert(0) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
  }
// for(var i=0; i<4; i++){
//   liList[i].onclick = function(){
//     alert(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
//   }
// }
})

</script>

<template>
  <div>内存泄漏-闭包</div>
  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</template>

<style scoped>

</style>
